<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jspf/taglibs.jspf" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="/styles/jquery-ui.css">
    <link rel="stylesheet" href="/styles/blueimp-gallery.css">
    <script type="text/javascript">
        localPath="ads"
    </script>
</head>
<body>
<div class="p-h-md p-v bg-white box-shadow pos-rlt">
    <h3 class="no-margin">广告管理</h3>
</div>
<div class="p-md">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="pull-right hidden-xs w">
            </div>
            <%--<a href="/ads/add?<%= Math.random() %>" type="button" ui-sref="app.add" class="btn btn-sm btn-success ng-click-active"--%>
            <%--<c:if test="${userContext.member.operationType==1&&userContext.fromBackend ==false}">style="display:none"</c:if>--%>
            <%--> <i class="glyphicon glyphicon-plus"></i>--%>
            <%--新建广告--%>
            <%--</a>--%>
        </div>
        <table class="table table-bordered table-hover bg-white">
            <tr>
                <th>广告名称</th>
                <th>广告计划</th>
                <th>起止时间</th>
                <th>曝光量</th>
                <th>点击数</th>
                <th>点击率</th>
                <c:choose>
                    <c:when test="${userContext.member.operationType==1&&userContext.fromBackend ==false}">
                    </c:when>
                    <c:otherwise>
                        <th>出价</th>
                    </c:otherwise>
                </c:choose>
                <th>点击均价</th>
                <th>总花费</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <c:if test="${!empty form.memberFrontAdGourp}">
                <c:forEach items="${ form.memberFrontAdGourp}" var="ad">
                    <tr>
                        <td>
                                ${ad.frontAdGroup.title }
                        </td>
                        <c:choose>
                            <c:when test="${userContext.fromBackend ==true&&system==false}">
                                <td>${ad.frontAdGroup.frontCampaignName }</td>
                                <td>
                                    <!-- 起止时间 -->
                                    <c:choose>
                                        <c:when test="${ad.frontAdGroup.adPutType ==1}">
                                            不限
                                        </c:when>
                                        <c:otherwise>
                                            <fmt:formatDate value="${ad.frontAdGroup.adPutStartAt }"
                                                            pattern="yyyy-MM-dd"/>-
                                            <fmt:formatDate value="${ad.frontAdGroup.adPutEndAt }"
                                                            pattern="yyyy-MM-dd"/>
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </c:when>
                            <c:otherwise>
                                <td>
                                    <a href="/campaigns/sitetype/${ad.frontAdGroup.frontCampaignId }?sitesetType=${ad.frontAdGroup.frontCampaignType }"">${ad.frontAdGroup.frontCampaignName }</a>
                                </td>
                                <td>
                                    <!-- 起止时间 -->
                                    <c:choose>
                                        <c:when test="${ad.frontAdGroup.adPutType ==1}">
                                            不限
                                        </c:when>
                                        <c:otherwise>
                                            <fmt:formatDate value="${ad.frontAdGroup.adPutStartAt }"
                                                            pattern="yyyy-MM-dd"/>-
                                            <fmt:formatDate value="${ad.frontAdGroup.adPutEndAt }"
                                                            pattern="yyyy-MM-dd"/>
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <td>${ad.viewNum }</td>
                                <td>${ad.clickNum }</td>
                                <td><fmt:formatNumber value="${ad.ctr }" maxFractionDigits="2"/>%</td>
                                <c:choose>
                                    <c:when test="${userContext.member.operationType==1&&userContext.fromBackend ==false}">

                                    </c:when>
                                    <c:otherwise>
                                        <td>￥<fmt:formatNumber value="${ad.frontAdGroup.adOffer }"
                                                               maxFractionDigits="2"/></td>
                                    </c:otherwise>
                                </c:choose>
                                <td>￥<fmt:formatNumber value="${ad.costPerClick }" maxFractionDigits="2"/></td>
                                <td>￥<fmt:formatNumber value="${ad.cost }" maxFractionDigits="2"/></td>
                            </c:otherwise>
                        </c:choose>
                        <td>
                            <c:choose>
                                <c:when test="${ad.frontAdGroup.frontAdGroupType ==1}">
                                    <div class="text-warning-dk">审核中</div>
                                </c:when>
                                <c:when test="${ad.frontAdGroup.frontAdGroupType ==2}">
                                    <div class="text-success-dk">投放中</div>
                                </c:when>
                                <c:when test="${ad.frontAdGroup.frontAdGroupType ==4}">
                                    <div class="text-success-dk">投放中</div>
                                </c:when>
                                <c:when test="${ad.frontAdGroup.frontAdGroupType ==5}">
                                    <div class="text-danger-dk">审核不通过</div>
                                </c:when>
                                <c:otherwise>
                                    <div class="text-danger-dk">已结束</div>
                                </c:otherwise>
                            </c:choose>
                        </td>
                        <td ng-controller="AsideDemoCtrl" class="ng-scope">
                            <div class="col-md-6">
                                <a name="slideshow" onclick="preview(${ad.frontAdGroup.id})" class="ng-scope">预览</a>
                                <!--   <a ui-sref="app.chdetail" href="#/app/chdetail">统计</a> -->
                            </div>
                            <%--<div class="col-md-6"><a href="/ads/edit/${ad.frontAdGroup.id }">编辑</a>--%>
                                <%--<a name="delete"--%>
                                   <%--href="javascript:deleteAdGroup(${ad.frontAdGroup.id },${ ad.frontAdGroup.frontAdGroupType})"--%>
                                   <%--<c:if test="${userContext.member.operationType==1&&userContext.fromBackend ==false}">style="display:none"</c:if>--%>
                                <%-->删除</a>--%>
                            <%--</div>--%>
                        </td>
                    </tr>
                </c:forEach>
            </c:if>
        </table>
        <div class="text-center">
            <airad:pagination pageSize="${form.page.pageSize }"
                              href="/ads/list?pageNumber=PAGENUM"
                              totalRecord="${form.page.totalCount }"
                              currentPage="${form.page.pageNumber }"
            >
            </airad:pagination>
        </div>
    </div>
</div>

<div id="links" style="display:none"></div>
<!-- The dialog widget -->
<div id="blueimp-gallery-dialog" data-show="fade" data-hide="fade">
    <!-- The Gallery widget  -->
    <div class="blueimp-gallery blueimp-gallery-carousel blueimp-gallery-controls" style="z-index: 999">
        <div class="slides"></div>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="play-pause"></a>
    </div>
</div>

<script type="text/javascript">
    //权限控制 代运营 客户自己登陆账户所看到的
    // if(operationType==1&&!isFromBackend){
    //	$('input').attr("readonly","readonly")
    //  $('input').attr("disabled","disabled")
    //隐藏所有的添加按钮
    //  $("a[type=button]").hide();
    //隐藏所有的删除按钮
    //  $("a[name=delete]").hide();
    // }
    function deleteAdGroup(adGroupId, type) {


// 	if(type==2){
// 		bootbox.dialog({
// 			title : "温馨提示",
// 			message:"您要删除的广告正在投放中无法删除",
// 			buttons:{
// 				"success":{
// 					"label" : "<i class='icon-ok'></i> 确定",
//           			 "className":"btn-sm btn-success",
// 					 "callback" : function() {
// 					 }
// 				}
// 			}
// 		});
// 	}else{
        bootbox.dialog({
            title: "重要提醒!",
            message: "删除本广告,将删除与该广告相关的信息,并数据不可恢复",
            buttons: {
                "success": {
                    "label": "<i class='icon-ok'></i> 确定",
                    "className": "btn-sm btn-success",
                    "callback": function () {
                        $.ajax({
                            url: "/ads/delete/" + adGroupId,
                            type: "POST",
                            dataType: "json",
                            cache: false,
                            success: function (data) {
                                if (data = "success") {
                                    bootbox.dialog({
                                        message: "删除成功",
                                        buttons: {
                                            "success": {
                                                "label": "<i class='icon-ok'></i> 确定",
                                                "className": "btn-sm btn-success",
                                                "callback": function () {
                                                    location.reload();
                                                }
                                            }
                                        }
                                    });
                                }

                            }
                        })

                    }
                }
            }
        });

// 	}
    }

    function preview(adGroupId) {
        $.ajax({
            url: "/common/creatives/" + adGroupId,
            type: "GET",
            dataType: "json",
            cache: false,
            success: function (data) {
                creatives = data
//	 			totalCount=creatives.length;
// 				console.log(data)
                console.log(JSON.stringify(data));
                var frontCreatives = data.frontCreatives;
                var frontAdGroup = data.frontAdGroup;
                var linksContainer = $('#links')
                //
                linksContainer.html("");
                var baseUrl
                $.each(frontCreatives, function (index, photo) {
                    baseUrl = photo.picPath;
                    $('<a/>')
                            .append($('<img>').prop('src', baseUrl))
                            .prop('href', baseUrl)
                            .prop('title', frontAdGroup.title + "   " + photo.frontMaterialName)
                            .attr('data-dialog', '')
                            .appendTo(linksContainer)
                });

                $('#blueimp-gallery-dialog .blueimp-gallery').data('startSlideshow', true);
                $('#links').children().first().click()
            }

        })
    }
</script>
<script src="/js/gallery/blueimp-gallery.js"></script>
<script src="/js/gallery/jquery.blueimp-gallery.js"></script>
<script src = "/js/gallery/jquery.image-gallery.js" ></script>
</body>
</html>